import React, { useContext } from 'react';
import cs from 'classnames';
import {
  Tooltip,
  Avatar,
  Dropdown,
  Menu,
  Message,
  Button,
} from '@arco-design/web-react';
import {
  IconSunFill,
  IconMoonFill,
  IconSettings,
  IconLoading,
  IconExport,
} from '@arco-design/web-react/icon';
import { useSelector } from 'react-redux';
import store, { GlobalState } from '@/store';
import { GlobalContext } from '@/context';
import useLocale from '@/utils/useLocale';
import Logo from '@/assets/logo.svg';
import LogoCollapsed from '@/assets/logo-collapsed.svg';
import IconButton from './IconButton';
import Settings from '../Settings';
import styles from './style/index.module.less';
import defaultLocale from '@/locale';
import { LoginOut } from '@/api/modules';
import AvatarPng from '@/assets/Avatar.png';
import { useHistory } from 'react-router-dom';

function Navbar({
  show,
  leftWidth,
  collapsed,
}: {
  show: boolean;
  leftWidth: number;
  collapsed: boolean;
}) {
  const t = useLocale();
  const { userInfo, userLoading, token } = useSelector(
    (state: GlobalState) => state
  );

  const { setLang, lang, theme, setTheme, rtl } = useContext(GlobalContext);
  const history = useHistory();
  function logout() {
    LoginOut().finally(() => {
      store.dispatch({
        type: 'reset',
      });
    });
    history.replace('/login');
  }

  function onMenuItemClick(key) {
    if (key === 'logout') {
      logout();
    } else {
      Message.info(`You clicked ${key}`);
    }
  }

  if (!show) {
    return (
      <div className={styles['fixed-settings']}>
        <Settings
          trigger={
            <Button icon={<IconSettings />} type="primary" size="large" />
          }
        />
      </div>
    );
  }

  const droplist = (
    <Menu onClickMenuItem={onMenuItemClick} className={rtl && 'rtl'}>
      <div className={styles['userInfo']}>
        <div className={styles['name']}>{userInfo.account}</div>
        <div className={styles['org']}>{userInfo.orgName}</div>
      </div>
      <Menu.Item key="logout">
        <div className={styles['logout']}>
          {t['navbar.logout']}
          <IconExport
            className={styles['dropdown-icon']}
            style={{ transform: rtl ? 'scaleX(-1)' : '' }}
          />
        </div>
      </Menu.Item>
    </Menu>
  );
  return (
    <div className={cs(styles.navbar, rtl ? 'rtl' : '')}>
      {collapsed ? (
        <div className={styles.left} style={{ width: leftWidth }}>
          <div className={styles.logo}>
            <LogoCollapsed />
          </div>
        </div>
      ) : (
        <div className={styles.left} style={{ width: leftWidth }}>
          <div className={styles.logo}>
            <Logo />
          </div>
        </div>
      )}

      <ul className={styles.right}>
        {/* <li>
          <Input.Search
            className={styles.round}
            placeholder={t['navbar.search.placeholder']}
          />
        </li> */}
        <li>
          <Button
            shape="circle"
            type="secondary"
            className={cs(styles['icon-button'], rtl && 'ltr')}
            onClick={() => {
              const value = lang == 'en-US' ? 'ar-EG' : 'en-US';
              setLang(value);
              // const nextLang = defaultLocale[value];
              // Message.info(
              //   `${nextLang['message.lang.tips']}${
              //     value == 'en-US' ? 'ar-AE' : 'en-US'
              //   }`
              // );
            }}
          >
            {lang == 'en-US' ? 'AR' : 'EN'}
          </Button>
        </li>

        {/* <li>
          <Select
            triggerElement={
              <Button
                shape="circle"
                type="secondary"
                className={cs(styles['icon-button'])}
              >
                {lang == 'en-US' ? 'AR' : 'EN'}
              </Button>
            }
            options={[
              { label: 'English', value: 'en-US' },
              { label: 'العربية', value: 'ar-EG' },
            ]}
            value={lang}
            triggerProps={{
              autoAlignPopupWidth: false,
              autoAlignPopupMinWidth: true,
              position: 'br',
            }}
            trigger="hover"
            onChange={(value) => {
              setLang(value);
              const nextLang = defaultLocale[value];
              Message.info(`${nextLang['message.lang.tips']}${value}`);
            }}
          />
        </li> */}
        {/* <li>
          <MessageBox>
            <IconButton icon={<IconNotification />} />
          </MessageBox>
        </li> */}
        <li>
          <Tooltip
            content={
              theme === 'light'
                ? t['settings.navbar.theme.toDark']
                : t['settings.navbar.theme.toLight']
            }
          >
            <IconButton
              icon={theme !== 'dark' ? <IconMoonFill /> : <IconSunFill />}
              onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
            />
          </Tooltip>
        </li>
        {/* <li>
          <Settings />
        </li> */}
        {token && (
          <li>
            <Dropdown droplist={droplist} position="br" disabled={userLoading}>
              <div className={styles['user']}>
                {userLoading ? (
                  <IconLoading />
                ) : (
                  <>
                    <Avatar size={32} style={{ cursor: 'pointer' }}>
                      <img alt="avatar" src={AvatarPng} />
                    </Avatar>
                  </>
                )}
              </div>
            </Dropdown>
          </li>
        )}
      </ul>
    </div>
  );
}

export default Navbar;
